import React, { Component } from 'react'
import { getCurrentInstance } from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'
import { AtDivider, AtButton, AtInput } from 'taro-ui'
import moment from 'moment';
import './index.scss'
import {addSocietyInfo, updateSocietyInfo} from "../../api/user";

class Page extends Component {

  constructor (props) {
    super(props);
    this.state = {
      encodeOid: '',
      OperationType: '',
      societyFloat: true,
      checkObj: {
        begindate: '入职日期',
        company: '任职单位',
        department: '任职部门',
        enddate: '离职日期',
        responsibility: '任职岗位',
        witness: '证明人',
        witnesscontact: '证明人联系方式'
      },
      form: {
        begindate: '',
        company: '',
        department: '',
        empoid: '',
        enddate: '',
        oid: '',
        responsibility: '',
        witness: '',
        witnesscontact: ''
      }
    }
  }

  componentWillMount () { }

  componentDidMount () {
    let { oid, encodeOid, OperationType, data } = getCurrentInstance().router.params;
    let { form } = this.state;
    form.empoid = oid;
    if (data){
      form = JSON.parse(decodeURIComponent(data));
      form.begindate = moment(form.begindate).format('YYYY-MM-DD');
      form.enddate = moment(form.enddate).format('YYYY-MM-DD');
    }
    this.setState({ encodeOid: encodeOid, form: form, OperationType: OperationType});
  }

  componentWillUnmount () { }

  handleDatePickerChange = (e, name)=>{
    let { form } = this.state;
    let newData = {...form};
    newData[name] = e.detail.value;
    this.setState({
      form: newData
    });
    return e.detail.value;
  };

  handleInputChange = (value, name) => {
    const { form } = this.state;
    let newData = {...form};
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };

  handleBack = (value) => {
    let { form, encodeOid } = this.state
    Taro.redirectTo({ url: '/pages/portal/index?oid=' + encodeOid })
  }

  handleSubmit = () => {
    const phoneFormat = /^1[3456789]\d{9}$/;
    let { form, OperationType, checkObj, encodeOid } = this.state;
    let { isDelete, operatetime, oid, ...data} =form;
    let arr;
    if ((arr = Object.keys(data).filter(v=>!data[v])).length>0) {
      Taro.showToast({
        title: `请填写${checkObj[arr[0]]}`,
        icon: 'none',
        duration: 1500
      });
      return;
    }
    if (!phoneFormat.test(form.witnesscontact)){
      Taro.showToast({title: `证明人联系号码格式错误`, icon: 'none', duration: 1000});
      return;
    }
    if (OperationType && OperationType ==='add'){
      addSocietyInfo(form).then(res => {
        Taro.redirectTo({url: '/pages/portal/index?oid=' + encodeOid });
      });
    }else if (OperationType && OperationType ==='update'){
      updateSocietyInfo(form).then(res => {
        Taro.redirectTo({url: '/pages/portal/index?oid=' + encodeOid });
      });
    }
  };

  render () {
    return (
      <View className='society'>
        <AtDivider content='请填写工作经历' fontColor='#50C77A'  />
        <View>
          <View className='society__form'>
            <View className='society__form-label'>任职单位<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写'
              value={this.state.form.company}
              onChange={(e) => this.handleInputChange(e, 'company')}
            />
          </View>
          <View className='society__form'>
            <View className='society__form-label'>任职部门<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写'
              value={this.state.form.department}
              onChange={(e) => this.handleInputChange(e, 'department')}
            />
          </View>
          <View className='society__form'>
            <View className='society__form-label'>入职日期<View className='required'>*</View></View>
            <Picker className='society__form-picker' mode='date'
                    onChange={(e) => this.handleDatePickerChange(e, 'begindate')}>
            {
                this.state.form.begindate
                  ? <View className='society__form-picker-value'>{this.state.form.begindate}</View>
                  : <View className='society__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='society__form'>
            <View className='society__form-label'>离职日期<View className='required'>*</View></View>
            <Picker className='society__form-picker' mode='date'
                    onChange={(e) => this.handleDatePickerChange(e, 'enddate')}>
              {
                this.state.form.enddate
                  ? <View className='society__form-picker-value'>{this.state.form.enddate}</View>
                  : <View className='society__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='society__form'>
            <View className='society__form-label'>任职岗位<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写'
              value={this.state.form.responsibility}
              onChange={(e) => this.handleInputChange(e, 'responsibility')}
            />
          </View>
          <View className='society__form'>
            <View className='society__form-label'>证明人<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='text'
              placeholder='请填写证明人'
              value={this.state.form.witness}
              onChange={(e) => this.handleInputChange(e, 'witness')}
            />
          </View>
          <View className='society__form'>
            <View className='society__form-label'>证明人联系号码<View className='required'>*</View></View>
            <AtInput
              name='value'
              type='phone'
              placeholder='请填写证明人联系方式'
              value={this.state.form.witnesscontact}
              onChange={(e) => this.handleInputChange(e, 'witnesscontact')}
            />
          </View>
        </View>

        <View className='button_group'>
          <AtButton onClick={() => this.handleBack()}>返回</AtButton>
          <AtButton type='primary' onClick={this.handleSubmit}>保存</AtButton>
        </View>

      </View>
    )
  }
}

export default Page
